<template>
  <view class="training-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-container">
        <text class="iconfont-v2 icon-sousuo search-icon"></text>
        <input 
          class="search-input" 
          placeholder="请输入关键字" 
          v-model="searchKeyword" 
          @confirm="handleSearch" 
        />
        <button class="search-btn" @click="handleSearch">
          <text>搜索</text>
        </button>
      </view>
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <view class="category-item" v-for="(category, index) in categories" :key="index" @click="goCategory(category)">
        <view class="category-icon" :style="{ backgroundColor: category.color }">
          <text class="iconfont-v2" :class="category.icon"></text>
        </view>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>

    <!-- 名师课程 -->
    <view class="featured-courses-section">
      <view class="section-header">
        <view class="section-title">
          <view class="title-bar"></view>
          <text>名师课程</text>
        </view>
        <view class="view-all" @click="viewAllFeatured">
          <text>查看全部</text>
          <text class="iconfont-v2 icon-youjiantou"></text>
        </view>
      </view>
      
      <view class="featured-courses">
        <view class="course-card" v-for="(course, index) in featuredCourses" :key="index" @click="goCourseDetail(course)">
          <view class="instructor-avatar">
            <image :src="course.instructor.avatar" :alt="course.instructor.name" />
          </view>
          <view class="course-info">
            <text class="instructor-name">{{ course.instructor.name }}</text>
            <text class="course-description">{{ course.instructor.specialty }}</text>
            <text class="enrollment-count">已报名 {{ course.enrollment }}人</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门课程 -->
    <view class="hot-courses-section">
      <view class="section-header">
        <view class="section-title">
          <view class="title-bar"></view>
          <text>热门课程</text>
        </view>
      </view>
      
      <view class="hot-courses">
        <view class="course-card" v-for="(course, index) in hotCourses" :key="index" @click="goCourseDetail(course)">
          <view class="course-thumbnail">
            <image :src="course.thumbnail" :alt="course.title" />
            <view class="course-tag">{{ course.tag }}</view>
          </view>
          <view class="course-info">
            <text class="course-title">{{ course.title }}</text>
            <text class="course-instructor">{{ course.instructor }}</text>
            <view class="course-stats">
              <view class="stat-item">
                <text class="iconfont-v2 icon-xueyuan stat-icon"></text>
                <text class="stat-text">{{ course.students }}人学习</text>
              </view>
              <view class="stat-item">
                <text class="iconfont-v2 icon-zan1 stat-icon"></text>
                <text class="stat-text">{{ course.likes }}点赞</text>
              </view>
            </view>
            <view class="course-price">
              <text class="current-price">¥{{ course.price }}</text>
              <text class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最新课程 -->
    <view class="latest-courses-section">
      <view class="section-header">
        <view class="section-title">
          <view class="title-bar"></view>
          <text>最新课程</text>
        </view>
      </view>
      
      <view class="latest-courses">
        <view class="course-card" v-for="(course, index) in latestCourses" :key="index" @click="goCourseDetail(course)">
          <view class="course-thumbnail">
            <image :src="course.thumbnail" :alt="course.title" />
            <view class="course-tag">{{ course.tag }}</view>
          </view>
          <view class="course-info">
            <text class="course-title">{{ course.title }}</text>
            <text class="course-instructor">{{ course.instructor }}</text>
            <text class="course-time">{{ course.time }}</text>
            <view class="course-price">
              <text class="current-price">¥{{ course.price }}</text>
              <text class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      
      // 分类数据
      categories: [
        { name: "驾驶培训", icon: "icon-xz", color: "#9C27B0" },
        { name: "专升本", icon: "icon-shoucang1", color: "#E91E63" },
        { name: "四六级", icon: "icon-bofang", color: "#4CAF50" },
        { name: "考研考公", icon: "icon-xiaoxi", color: "#2196F3" }
      ],
      
      // 名师课程数据
      featuredCourses: [
        {
          id: 1,
          instructor: {
            name: "卡卡老师",
            specialty: "主攻英语方面教会学",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          enrollment: 154
        },
        {
          id: 2,
          instructor: {
            name: "卡卡老师",
            specialty: "主攻英语方面教会学",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          enrollment: 154
        },
        {
          id: 3,
          instructor: {
            name: "卡卡老师",
            specialty: "主攻英语方面教会学",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          enrollment: 154
        }
      ],
      
      // 热门课程数据
      hotCourses: [
        {
          id: 1,
          title: "英语四级强化训练",
          instructor: "李老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "热门",
          students: 1250,
          likes: 890,
          price: "199",
          originalPrice: "299"
        },
        {
          id: 2,
          title: "数学基础强化",
          instructor: "王老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "推荐",
          students: 980,
          likes: 756,
          price: "159",
          originalPrice: "229"
        },
        {
          id: 3,
          title: "考研英语冲刺",
          instructor: "张老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "热门",
          students: 2100,
          likes: 1650,
          price: "299",
          originalPrice: "399"
        }
      ],
      
      // 最新课程数据
      latestCourses: [
        {
          id: 1,
          title: "计算机基础入门",
          instructor: "刘老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "新课程",
          time: "2024-01-15",
          price: "99",
          originalPrice: "149"
        },
        {
          id: 2,
          title: "物理实验指导",
          instructor: "陈老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "新课程",
          time: "2024-01-14",
          price: "129",
          originalPrice: "179"
        },
        {
          id: 3,
          title: "化学方程式解析",
          instructor: "赵老师",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tag: "新课程",
          time: "2024-01-13",
          price: "89",
          originalPrice: "129"
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log("搜索课程:", this.searchKeyword);
        uni.showToast({
          title: `搜索: ${this.searchKeyword}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        });
      }
    },
    goCategory(category) {
      console.log("选择分类:", category.name);
      uni.showToast({
        title: `选择分类: ${category.name}`,
        icon: 'none'
      });
    },
    viewAllFeatured() {
      console.log("查看全部名师课程");
      uni.navigateTo({
        url: '/pages/fast/teacher-list'
      });
    },
    goCourseDetail(course) {
      console.log("查看课程详情:", course);
      uni.navigateTo({
        url: `/pages/fast/course-detail?id=${course.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.training-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-section {
  background: white;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .search-bar-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    gap: 20rpx;

    .search-icon {
      font-size: 32rpx;
      color: #999;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      background: #ED6567;
      color: white;
      border: none;
      border-radius: 40rpx;
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #d55a54;
      }

      text {
        color: white;
      }
    }
  }
}

.category-nav {
  background: white;
  padding: 40rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
    }

    .category-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;

      .iconfont-v2 {
        font-size: 40rpx;
        color: white;
      }
    }

    .category-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.featured-courses-section,
.hot-courses-section,
.latest-courses-section {
  background: white;
  margin: 0 20rpx 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .section-title {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .title-bar {
        width: 8rpx;
        height: 32rpx;
        background: #ED6567;
        border-radius: 4rpx;
      }

      text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .view-all {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 26rpx;
      color: #ED6567;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: #d55a54;
      }

      .iconfont-v2 {
        font-size: 24rpx;
      }
    }
  }
}

.featured-courses {
  display: flex;
  gap: 20rpx;
  overflow-x: auto;

  .course-card {
    flex-shrink: 0;
    width: 240rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
    }

    .instructor-avatar {
      width: 240rpx;
      height: 160rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 16rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .course-info {
      .instructor-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .course-description {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 12rpx;
        display: block;
        line-height: 1.3;
      }

      .enrollment-count {
        font-size: 22rpx;
        color: #ED6567;
        display: block;
      }
    }
  }
}

.hot-courses,
.latest-courses {
  .course-card {
    display: flex;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    &:hover {
      transform: translateY(-2rpx);
    }

    .course-thumbnail {
      position: relative;
      width: 200rpx;
      height: 140rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-right: 24rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .course-tag {
        position: absolute;
        top: 12rpx;
        left: 12rpx;
        background: #ED6567;
        color: white;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        font-weight: 500;
      }
    }

    .course-info {
      flex: 1;

      .course-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
        line-height: 1.3;
      }

      .course-instructor {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 12rpx;
        display: block;
      }

      .course-time {
        font-size: 22rpx;
        color: #999;
        margin-bottom: 12rpx;
        display: block;
      }

      .course-stats {
        display: flex;
        gap: 24rpx;
        margin-bottom: 12rpx;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .stat-icon {
            font-size: 20rpx;
            color: #999;
          }

          .stat-text {
            font-size: 20rpx;
            color: #999;
          }
        }
      }

      .course-price {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .current-price {
          font-size: 28rpx;
          font-weight: 600;
          color: #ED6567;
        }

        .original-price {
          font-size: 22rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>